<template>
    <el-menu :default-active="defaultRoute" class="el-menu-vertical-demo">
        <div class="el-menu-vertical-title">
            <svg
                t="1714232020549"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="12515"
            >
                <path
                    d="M512 1024c-70.144 0-134.144-56.832-180.224-159.744-41.984-94.72-65.024-219.648-65.024-352.256s23.04-257.536 65.024-352.256C377.856 56.832 441.856 0 512 0s134.144 56.832 180.224 159.744C734.208 254.464 757.248 379.392 757.248 512s-23.04 257.536-65.024 352.256c-46.08 102.912-110.08 159.744-180.224 159.744z m0-960c-86.016 0-181.248 183.808-181.248 448s95.744 448 181.248 448c86.016 0 181.248-183.808 181.248-448s-95.232-448-181.248-448z"
                    fill="#ffffff"
                    p-id="12516"
                    data-spm-anchor-id="a313x.search_index.0.i1.59ab3a81kDQRRq"
                    class="selected"
                ></path>
                <path
                    d="M776.704 846.848c-15.872 0-32.256-1.024-49.664-2.56-102.912-10.752-223.232-53.248-337.92-119.808-114.688-66.56-211.456-148.992-272.384-232.96C50.688 400.896 33.28 316.928 68.608 256s116.224-88.064 228.352-76.288c102.912 10.752 223.232 53.248 337.92 119.808 114.688 66.048 211.456 148.992 272.384 232.448 66.048 91.136 83.456 174.592 48.128 235.52-29.696 52.224-92.16 79.36-178.688 79.36zM247.296 241.152c-61.44 0-105.472 16.384-123.392 47.104-43.008 74.24 68.608 248.832 297.472 380.928s435.712 141.312 478.72 67.072c43.008-74.24-68.608-248.832-297.472-380.928-107.008-61.952-218.112-101.376-312.32-111.616-15.36-2.048-29.696-2.56-43.008-2.56z"
                    fill="#ffffff"
                    p-id="12517"
                    data-spm-anchor-id="a313x.search_index.0.i0.59ab3a81kDQRRq"
                    class="selected"
                ></path>
                <path
                    d="M247.296 846.848c-86.528 0-148.992-27.136-178.688-78.848-35.328-60.928-17.92-144.896 48.128-235.52 60.928-83.968 157.696-166.4 272.384-232.96 114.688-66.048 235.008-109.056 337.92-119.808 112.128-11.776 193.024 15.36 228.352 76.288 35.328 60.928 17.92 144.896-48.128 235.52-60.928 83.968-157.696 166.4-272.384 232.96-114.688 66.56-235.008 109.056-337.92 119.808-17.408 1.536-33.792 2.56-49.664 2.56zM776.192 241.664c-90.624 0-219.136 35.328-354.816 113.664-107.008 61.952-197.12 138.24-252.928 215.04-49.664 68.608-66.048 129.024-44.544 165.888 21.504 36.864 81.92 53.248 165.888 44.544 94.208-9.728 205.312-49.664 312.32-111.616 228.864-132.096 339.968-306.688 297.472-380.928-16.896-30.208-61.44-46.592-123.392-46.592z"
                    fill="#ffffff"
                    p-id="12518"
                    data-spm-anchor-id="a313x.search_index.0.i2.59ab3a81kDQRRq"
                    class="selected"
                ></path>
            </svg>
            <h3>电气故障专家库系统</h3>
        </div>

        <el-menu-item
            v-for="item in currentMenu"
            :key="item.name"
            :index="item.name"
            @click="handleChangeMenuitem(item)"
        >
            <i
                :class="'iconfont ' + item.icon"
                style="margin-right: 10px; font-size: 25px"
            ></i>
            <span slot="title">{{ item.label }}</span>
        </el-menu-item>
    </el-menu>
</template>

<script>
import { menu } from "../contant";

export default {
    name: "ComponentAside",
    data() {
        return {
            currentMenu: null,
            defaultRoute: "",
        };
    },

    methods: {
        handleChangeMenuitem(item) {
            if (this.$route.path !== item.path) {
                this.$router.push({ name: item.name });
            }
        },
    },

    mounted() {
        let userinfo = localStorage.getItem("userinfo");
        this.currentMenu = menu[JSON.parse(userinfo).type];
        this.defaultRoute = this.$router.currentRoute.name;
    },
};
</script>

<style lang="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 12vw;
    min-height: 400px;
    color: #fcfafa;
}

.el-menu-vertical-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    svg {
        width: 12%;
    }

    h3 {
        font-size: 1rem;
    }
}

.el-menu {
    height: 100%;
    background-color: #304156;
    border: none;

    &-item {
        color: #fcfafa;
    }

    &-item:hover {
        background-color: #1f2d3d;
    }

    &-item:focus {
        background-color: #1f2d3d;
    }
}

h3 {
    text-align: center;
}
</style>
